DOM - (Document Object Model) • Fluxo de Renderização
- A DOM não é responsável por organizar e renderizar os scripts JavaScript em si. Em vez disso, o navegador carrega e executa os scripts JavaScript que, por sua vez, podem manipular a DOM.
- Os arquivos .js (JavaScript) são carregados e executados pelo navegador. O código JavaScript pode então acessar e modificar a DOM para alterar o conteúdo e o comportamento da página.
- A DOM é uma árvore de elementos que representa a estrutura do HTML de uma página. Ela permite que scripts JavaScript interajam com e modifiquem o conteúdo e a estrutura da página HTML.
- Portanto, a DOM é essencialmente a representação da estrutura HTML que pode ser manipulada usando JavaScript, mas não organiza ou renderiza diretamente os scripts JavaScript.
- Complementando o que eu havia falado ontem sobre o fato de os navegadores até pouco tempo atrás não permitirem que um scipt invocasse outro, sendo necessário recorrer a ferramentas chamadas de Bundlers. Eu até então não havia entendido o porquê de haver apenas as metatags e um tal de root nos arquivos index.html e todo o conteúdo das SPAs está sendo escrito dentro de outro arquivo com um tipo esquisito (.jsx) que mais parece uma mistura de html com js. Mas agora tudo foi esclarecido na minha mente.
- O que ocorre, é que a tag script aponta para o script principal, onde lá dentro desse script o ReactDOM, junto com o método .render(), está transformando/renderizando os componentes (javascript files) ali invocados de maneira identada, em html para que os navegadores possam interpretar. outo ponto passado na tag script do nosso index.html é o type: modules, ou seja, é através dos módulos ECMAScripts (utilizados pelo Vite) que os navegadores atuais conseguirão nativamente lidar com o padrão de importação e exportação dos scripts, conseguindo interpretálos sem a necessidade de um bundler.
Grow like a 🌳!